@import '../bootstrap'
@import '../theme'

/* Theme */
tabs($material)
  .tabs__item
    color: $material.tabs.inactive

    &.tabs__item--active
      color: $material.tabs.active

    &.tabs__item--disabled
      color: $material.buttons.disabled

  .icon--left,
  .icon--right
    color: $material.icons.active

theme(tabs, "tabs")

.tabs
  overflow: hidden
  position: relative
  height: 100%

  &--grow .tabs__bar
    .tabs__li
      flex: 1

  &--fixed > .tabs__bar
    .tabs__li
      min-height: 160px
      max-height: 264px
      flex: 0 1 160px

      @media $display-breakpoints.xs-only
        min-height: 72px

  &--centered .tabs__bar
    .tabs__container
      justify-content: center

  &--icons
    .tabs__bar
      width: 72px

    .tabs__item
      flex-direction: column

  &.tabs--mobile .tabs__bar
    .icon--left, .icon--right
      display: none

    .tabs__wrapper
      &--scrollable.tabs__wrapper--overflow
        overflow: hidden !important

  &:not(.tabs--grow):not(.tabs--mobile)
    .tabs__item
      padding: 0 24px

  &:not(.tabs--centered):not(.tabs--grow):not(.tabs--mobile)
    .tabs__wrapper
      &--scrollable
        margin: 0 60px
        overflow: hidden !important

  &__bar
    background-color: $theme.primary
    height: 100%
    position: relative
    width: 48px

    @media $display-breakpoints.sm-and-down
      padding-left: 0

    .icon--left, .icon--right
      position: absolute
      top: 0
      height: 32px
      align-items: center
      width: 100%
      cursor: pointer
      user-select: none

    .icon--left
      left: 28px

    .icon--right
      right: 28px

  &__container
    display: flex
    height: 100%
    width: 100%
    position: absolute
    padding: 0
    top: 0
    align-items: center
    list-style: none
    will-change: transform
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)

    > li:not(.tabs__slider)
      height: 100%

    &-left
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 32px
      display: flex
      align-items: center

  &__wrapper
    position: relative
    overflow-x: auto
    height: inherit

  &__item
    align-items: center
    display: flex
    flex-shrink: 0
    justify-content: center
    width: 100%
    padding: 0 12px
    position: relative
    text-align: center
    text-decoration: none
    text-transform: uppercase
    text-overflow: ellipsis
    white-space: nowrap

    .icon
      color: inherit
      margin: 0 0 5px

    &--disabled
      pointer-events: none

  &__items
    position: relative
    overflow: hidden

  &__content
    transition: $primary-transition
    height: 100%

    .card
      border-radius: 0 0 2px 2px

  &__slider
    position: absolute
    bottom: 0
    width: 2px
    background: $theme.accent
    transition: $primary-transition
